<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'
	import {
		getRelationListApi,
	} from "@/assets/api/other/space.js"
	import {
		delRelationApi,
	} from "@/assets/api/other/family.js"
	import {
		navigateBack,
		navigateToUpToInviteCreate,
	} from "@/assets/scripts/navigate.js"


	const meMemorialId = ref("")
	const familyList = ref([])
	const user = ref({})
	const memorialNum = ref(0)

	onMounted(() => {
		route_init() // 路由参数
		user_init() // 用户信息
		familyList_init() // 请求记录数据
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
			meMemorialId.value = route.query.meMemorialId
		}
	}

	const exit_handleClick = (id) => {
		uni.showModal({
			title: '温馨提示',
			content: "是否确认该操作",
			success: async (e) => {
				if (e.confirm) {
					const res = await delRelationApi(id)
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 1000,
							complete: () => {
								setTimeout(() => {
									navigateBack()
								}, 1000)
							}
						})
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'error',
						})
					}
				}
			}
		})
	}

	const user_init = () => {
		user.value = uni.getStorageSync('user')
	}

	const familyList_init = async () => {
		const res = await getRelationListApi(meMemorialId.value)
		if (res.code === 200) {
			familyList.value = res.rows
			let total = 0
			for (let i = 0; i < familyList.value.length; i++) {
				const element = familyList.value[i]
				total += parseInt(element.memorialNum)
			}
			memorialNum.value = total
		}
	}
</script>

<template>
	<view class="">
		<uv-navbar :fixed="false" bgColor="#f8f8f8" @leftClick="navigateBack" title="纪念馆亲友团">
		</uv-navbar>
		<view class="d-flex statistics">
			<view class="d-flex-fx1 d-flex d-flex-jcc d-flex-aic">
				<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic">
					<view class="font-fs12 mb-normal">
						缅怀次数
					</view>
					<view class="d-flex number">
						<view class="font-fs20">
							{{memorialNum}}
						</view>
						<view class="font-fs12 ml-small">
							次
						</view>
					</view>
				</view>
			</view>
			<view class="d-flex-fx1 d-flex d-flex-jcc d-flex-aic">
				<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic">
					<view class="font-fs12 mb-normal">
						亲友团成员
					</view>
					<view class="d-flex number">
						<view class="font-fs20">
							{{familyList.length}}
						</view>
						<view class="font-fs12 ml-small">
							次
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p-normal">

			<view class="user-list">

				<view class="p-normal mb-normal item" v-for="(item, index) in familyList" :key="index">
					<view class="d-flex">
						<view class="d-flex-fs0 avatar">
							<image :src="item.sysUser.avatar" mode="scaleToFill" class="image image-fill">
							</image>
						</view>
						<view class="d-flex-fx1 ml-normal">
							<view class="mb-small d-flex">
								<view class="d-flex mr-small font-fs14 name">
									<view class="mr-small">
										昵称:
									</view>
									<view class="">
										{{item.sysUser.nickName}}
									</view>
								</view>
								<view class="d-flex">
									<view class="mr-small px-small d-flex d-flex-aic font-fs12 tag admin"
										v-if="item.isAdmin==='是'">
										管理员
									</view>
									<view class="mr-small px-small d-flex d-flex-aic font-fs12 tag me"
										v-if="user.userId===item.sysUser.userId">
										我
									</view>
									<view class="mr-small px-small d-flex d-flex-aic font-fs12 tag">
										{{item.relation}}
									</view>
								</view>
							</view>
							<view class="font-fs12 d-flex mt-small date">
								<view class="mr-small">
									加入时间:
								</view>
								<view class="">
									{{item.createTime.slice(0,10)}}
								</view>
							</view>
						</view>
					</view>
					<view class="d-flex d-flex-jcsb d-flex-aic">
						<view class="d-flex d-flex-aic font-fs12 mt-normal count">
							<view class="d-flex d-flex-aic">
								<uni-icons type="fire-filled" class="mr-small" color="#999999" size="16"></uni-icons>
								<view class="">
									0
								</view>
							</view>
							<view class="mx-normal line"></view>
							<view class="d-flex d-flex-aic">
								<uni-icons type="eye-filled" class="mr-small" color="#999999" size="16"></uni-icons>
								<view class="">
									74
								</view>
							</view>
						</view>
						<view class="font-fs12 px-small del-btn" v-if="user.userId===item.sysUser.userId"
							@click="exit_handleClick(item.id)">
							退出
						</view>
					</view>

				</view>

			</view>

			<uv-button @click="navigateToUpToInviteCreate(meMemorialId)" text="邀请亲友" type='success'></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.statistics {
		color: #fff;
		position: relative;
		background-color: #12b886;
		height: 100px;

		&::before {
			content: "";
			position: absolute;
			display: block;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 2px;
			height: 60%;
			background-color: #fff;
		}

		.number {
			align-items: flex-end;
		}
	}

	.user-list {
		.item {
			background-color: #f5f5f5;

			.count {
				color: #999999;

				.line {
					width: 1px;
					height: 10px;
					background-color: #bbbbbb;
				}
			}

			.avatar {
				width: 45px;
				height: 45px;
				background-color: #aaa;
			}

			.name {
				color: #1e1e1e;
			}

			.date {
				color: #888888;
			}

			.tag {
				border: 1px solid #67c23a;
				border-radius: 6px;
				height: 18px;
				color: #67c23a;
				position: relative;

				&.admin,
				&.me {
					border-color: #4289ff;
					color: #4289ff;
				}
			}

			.del-btn {
				border-radius: 6px;
				height: 18px;
				border: 1px solid #4289ff;
				border-radius: 6px;
				color: #4289ff;
			}
		}
	}
</style>